<template>
    <div>
        <el-row>
            <!-- 左侧 -->
            <el-col :span="8">
                <el-card class="box-card">
                    <!-- 用户头像 -->
                    <div class="user">
                        <img class="user-logo" src="../assets/奥特曼.jpg" alt="奥特曼" />
                        <div class="text">
                            <p>Admin</p>
                            <span>超级管理员</span>
                        </div>
                    </div>
                    <!-- 登录信息 -->
                    <div class="login-info">
                        <p>上次登录时间:<span>2024-2-20</span></p>
                        <p>上次登录地点:<span>西安</span></p>
                    </div>
                </el-card>
                <!-- 产品数据 -->
                <el-card class="box-card" style="margin-top: 20px; height: 480px">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column v-for="item in listTitleData" :key="item.code" :prop="item.code" :label="item.name"
                            :width="item.width">
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <!-- 右侧 -->
            <el-col :span="16" style="padding-left: 15px;">
                <!-- 订单列表 -->
                <div class="order-card">
                    <el-card class="box-card" v-for="item in  countData " :key="item.name"
                        :body-style="{ display: 'flex' }">
                        <i class="icon" :class="`el-icon-${item.icon}`" :style="{ background: item.color }"></i>
                        <div class="detail">
                            <p class="prince">￥{{ item.value }}</p>
                            <p class="desc">{{ item.name }}</p>
                        </div>
                    </el-card>
                </div>
                <!-- 折线图 -->
                <div class="line-chart">
                    <el-card>
                        <div id="line"></div>
                    </el-card>
                </div>
                <!-- 饼状图 -->
                <div class="graph">
                    <el-card>
                        <div id="bar1"></div>
                    </el-card>
                    <el-card>
                        <div id="bar2"></div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
/*
 * @desc 首页
 * @author rz
 * @date 2024-2-20
 */
import { getData } from "../api/index";
import * as echarts from 'echarts';
export default {
    data() {
        return {
            // 产品列表标题
            listTitleData: [
                {
                    code: "name",
                    name: "产品名称",
                    width: "",
                },
                {
                    code: "todayBuy",
                    name: "今日购买",
                    width: "",
                },
                {
                    code: "monthBuy",
                    name: "本月购买",
                    width: "",
                },
                {
                    code: "totalBuy",
                    name: "总购买",
                    width: "",
                },
            ],
            // 产品列表数据
            tableData: [
                {
                    name: "DCS",
                    todayBuy: 100,
                    monthBuy: 300,
                    totalBuy: 800,
                },
                {
                    name: "MOM",
                    todayBuy: 100,
                    monthBuy: 300,
                    totalBuy: 800,
                },
                {
                    name: "APC",
                    todayBuy: 100,
                    monthBuy: 300,
                    totalBuy: 800,
                },
                {
                    name: "BATCH",
                    todayBuy: 100,
                    monthBuy: 300,
                    totalBuy: 800,
                },
                {
                    name: "AAS",
                    todayBuy: 100,
                    monthBuy: 300,
                    totalBuy: 800,
                },
                {
                    name: "IDM",
                    todayBuy: 100,
                    monthBuy: 300,
                    totalBuy: 800,
                },
                {
                    name: "SCADA",
                    todayBuy: 100,
                    monthBuy: 300,
                    totalBuy: 800,
                },
            ],
            // 订单数据
            countData: [
                {
                    name: "今日支付订单",
                    value: 1234,
                    icon: "success",
                    color: "#2ec7c9",
                },
                {
                    name: "今日收藏订单",
                    value: 210,
                    icon: "star-on",
                    color: "#ffb980",
                },
                {
                    name: "今日未支付订单",
                    value: 1234,
                    icon: "s-goods",
                    color: "#5ab1ef",
                },
                {
                    name: "本月支付订单",
                    value: 666,
                    icon: "success",
                    color: "#2ec7c9",
                },
                {
                    name: "本月收藏订单",
                    value: 888,
                    icon: "star-on",
                    color: "#ffb980",
                },
                {
                    name: "本月未支付订单",
                    value: 123,
                    icon: "s-goods",
                    color: "#5ab1ef",
                },
            ],
            // 折线图数据
            lineCharsData: [],
        };
    },
    methods: {
        // 折线图实例
        initLineCharts() {
            // 1.基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('line'));
            // 2.绘制图表
            myChart.setOption({
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true
                    }
                ]
            });
        },
        // 左侧饼状图图实例
        initBar1Charts() {
            // 1.基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('bar2'));
            // 2.绘制图表
            myChart.setOption({
                title: {
                    text: ''
                },
                tooltip: {},
                xAxis: {
                    data: this.xLineData,
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            });
        },
        // 右侧饼状图实例
        initBar2Charts() {
            // 1.基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('bar1'));
            // 2.绘制图表
            myChart.setOption({
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ]
                    }
                ]
            });
        }
    },
    computed: {
        // 柱状图x轴数据
        xLineData() {
            return ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'];
        }
    },
    mounted() {
        // 请求首页数据
        getData().then(({ data }) => {
            this.lineCharsData = data.data.orderData.data;
        });
        // 初始化折线图图例
        this.initLineCharts();
        // 初始化饼状图图例
        this.initBar1Charts();
        // 初始化饼状图2图例
        this.initBar2Charts();

    },
};
</script>

<style lang="less" scoped>
.user {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #c0b0b0;

    .user-logo {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-right: 40px;
    }

    .text {
        p {
            font-size: 32px;
            margin-bottom: 10px;
        }

        span {
            color: #999;
        }
    }
}

.login-info {
    display: inline-block;
    line-height: 50px;
    height: 50px;

    p {
        font-size: 14px;
        line-height: 28px;
        color: #999;

        span {
            color: #666;
            margin-left: 60px;
        }
    }
}

.order-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .box-card {
        width: 32%;
        margin-bottom: 10px;

        .icon {
            width: 80px;
            height: 80px;
            font-size: 30px;
            line-height: 80px;
            text-align: center;
            color: white;
        }

        .detail {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: 15px;

            .prince {
                font-size: 30px;
                height: 30px;
                line-height: 30px;
            }

            .desc {
                font-size: 14px;
                color: #999;
                text-align: center;
            }
        }
    }
}

.line-chart {
    .el-card {
        display: flex;
        justify-content: center;
        height: 300px;

        #line {
            width: 700px;
            height: 300px;
        }
    }
}

.graph {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    .el-card {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        width: 49%;

        #bar1,
        #bar2 {
            width: 500px;
            height: 200px;
        }

    }
}
</style>